.avatar-uploader{
    position: relative;
    color: var(--text-color);
}
.upload-item{
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    padding: 4px;
    border: 1px solid var(--main-4);
    overflow: hidden;
    cursor: pointer;

    &.circle{
        border-radius: 50%;
        padding: 0;

        &>img{
            object-fit: cover;
        }
    }

    &>img{
        position: relative;
        width: 100%;
        height: 100%;
        object-fit: scale-down;
    }

    .actions, .loading{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .actions{
        display: none;
        background-color: rgba(var(--black-alpha), 0.45);

        .btn{
            display: flex;
            align-items: center;

            .button{
                position: relative;
                width: 24px;
                height: 24px;
                margin: 0 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                color: var(--white);
                cursor: pointer;

                &:hover{
                    background: rgba(var(--gray-6-alpha), 0.8);
                }
            }
        }
    }

    .loading{
        :global .ant-progress-text{
            color: var(--main-8);
        }
    }

    &:hover{
        border-color: var(--main-8);

        .actions{
            display: flex;
        }
    }
}
.upload{
    position: relative;
    --ant-color-fill-alter: var(--main-1);

    &.circle{
        :global .ant-upload-select{
            border-radius: 50% !important;
            overflow: hidden;
        }
    }

    .single-image{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;

        &>img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            object-fit: cover;
        }

        .mask{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            display: none;
            background-color: rgba(var(--black-alpha), 0.45);
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: var(--white);
        }

        &:hover{
            .mask{
                display: flex;
            }
        }
    }

    .single-loading{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        :global .ant-progress-text{
            color: var(--main-8);
        }
    }
}